<template>
    <div>
        <el-container>
            <el-header>
                <el-badge :value="12" class="item">
                    <el-button size="small">全部订单</el-button>
                </el-badge>
                &emsp;&emsp;
                <el-badge :value="5" class="item">
                    <el-button size="small">完成的订单</el-button>
                </el-badge>
                &emsp;&emsp;
                <el-badge :value="7" class="item">
                    <el-button size="small">未完成的订单</el-button>
                </el-badge>
                
            </el-header>
            <!-- 分割线 -->
            <el-divider></el-divider>
            <el-main>
                <el-table
                    :data="tableData"
                    style="width: 100%">
                    <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-table
                            :data="props.row.goods_detail"
                            style="width: 100%"

                            >
                            <el-table-column
                            prop="id"
                            label="订单详情"
                            width="180">
                            </el-table-column>
                            <el-table-column
                            prop="name"
                            width="180">
                            </el-table-column>
                            <el-table-column
                            prop="price">
                            </el-table-column>
                            <el-table-column
                            prop="g_num">
                            </el-table-column>
                        </el-table>
                    </template>
                    </el-table-column>
                    <el-table-column
                    label="订单 ID"
                    prop="id">
                    </el-table-column>
                    <el-table-column
                    label="订单金额"
                    prop="total">
                    </el-table-column>
                    <el-table-column
                    label="订单数量"
                    prop="goods_num">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                            <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-main>
            <el-footer>
                    <!-- 分页 -->
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        
                        :page-size="10"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="100">
                    </el-pagination>
                </el-footer>
        </el-container>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data() {
        return {
            currentPage: 1,
             tableData: [
                 {
                    id: '12987122',
                    total: '2588.00',
                    goods_num: '2',
                    status: '1',
                    goods_detail: [
                        {
                            'id': '2',
                            'name': '华为P30--8G128G',
                            'price': '1588.00',
                            'g_num': '1',
                            'sum_total': '1588.00'
                        },
                        {
                            'id': '2',
                            'name': '华为P20--8G128G',
                            'price': '1000.00',
                            'g_num': '1',
                            'sum_total': '1000.00'
                        },
                    ]
                    
                }, 
                {
                    id: '12987122',
                    total: '4588.00',
                    goods_num: '2',
                    status: '1',
                    goods_detail: [
                        {
                            'id': '2',
                            'name': '华为P40--8G128G',
                            'price': '2588.00',
                            'g_num': '1',
                            'sum_total': '1588.00'
                        },
                        {
                            'id': '2',
                            'name': '华为P30--8G128G',
                            'price': '2000.00',
                            'g_num': '1',
                            'sum_total': '2000.00'
                        },
                    ]
                    
                }, 
                
            ]
        }
    },
    methods: {
        handleEdit(index, row) {
            console.log(index, row);
        },
        handleDelete(index, row) {
            console.log(index, row);
        },
        // 分页的方法
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        }
    },
    created() {

    }
}
</script>

<style scoped>
.el-header{
    /* background-color: #B3C0D1; */
    color: #333;
    text-align: left;
    line-height: 60px;
  }
.demo-table-expand {
    font-size: 0;
  }
.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
.el-footer {
    text-align: center;
}
</style>
